<template>
	<el-form ref="QFFormRef"
					 :model="form"
					 :inline="inline"
					 :rules="rules"
					 :label-position="labelPosition"
					 label-width="auto">
		<el-form-item v-for="i in formFields"
									:key="i"
									:label="i.label">
			<component :is="formTemplates[i.type ?? 'input'] ?? ''"
								 v-model="formTemplates[i.fieldName]"
								 :prop="i.fieldName"
								 v-bind="i.attr" />
		</el-form-item>
	</el-form>
</template>
<script setup name="QFForm">
import {
	resolveComponent,
	watch,
	computed,
	defineModel,
	ref,
	onMounted,
} from "vue";
const {
	formFields = [],
	inline = false,
	labelPosition = "right",
	rules = [],
} = defineProps({
	/** 表单的字段配置 */
	formFields: {
		required: false,
		type: Array,
	},
	/** 是否横向表单，true 表示横向表单，false 表示垂直表单 */
	inline: {
		required: false,
		type: Boolean,
	},
	/** 标签的位置：left | right | top */
	labelPosition: {
		required: false,
		type: String,
	},
	rules: {
		required: false,
		type: Array,
	}
});
const formTemplates = {
	input: resolveComponent("el-input"),
	cascader: resolveComponent("el-cascader"),
	select: resolveComponent("el-select"),
	switch: resolveComponent("el-switch"),
	timePicker: resolveComponent("el-time-picker"),
	timeSelect: resolveComponent("el-time-select"),
	treeSelect: resolveComponent("el-tree-select"),
};
const QFFormRef = ref();
// 表单重置、表单校验、表单提交
const { form, resetForm, validate, validateField, validateFields, scrollToField } = defineModel(QFFormRef);
onMounted(() => {
	// 初始化表单
	formFields.forEach((item) => {
		form[item.fieldName] = item.value ?? "";
	});
});
</script>
<style lang="scss" scoped>
</style>
